<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    
</head>
<body>
    <div class="container-fluid">
        <div class="row">
          <div class="col-md-6">
            <!-- 专利申请趋势折线图容器 -->
            <div id="patentApplicationTrend" style="height:400px;"></div>
          </div>
          <div class="col-md-6">
            <!-- 专利类别分布饼图容器 -->
            <div id="patentCategoryDistribution" style="height:400px;"></div>
          </div>
          <div>
            <div id="chart" style="width: 800px; height: 600px;"></div>
            
          </div>
        </div>
        

      </div>
      <script src="js/echarts.min.js"></script>
      <script>

var chartDom = document.getElementById('patentApplicationTrend');
var myChart = echarts.init(chartDom);
var option;

option = {
  xAxis: {
    type: 'category',
    data: ['2024-01', '2024-02', '2024-03', '2024-04', '2024-05']
  },
  yAxis: {
    type: 'value'
  },
  series: [{
    data: [120, 132, 101, 134, 90],
    type: 'line'
  }]
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
var chartDom = document.getElementById('patentCategoryDistribution');
var myChart = echarts.init(chartDom);
var option;

option = {
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'vertical',
    left: 'left'
  },
  series: [
    {
      name: '访问来源',
      type: 'pie',
      radius: '75%',
      data: [
        {value: 335, name: '发明专利'},
        {value: 310, name: '实用新型'},
        {value: 234, name: '外观设计'}
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
};

myChart.setOption(option);

      </script>
</body>
</html>